<template>
  <div class="e_page">
    <div
      :id="`Mychart${idIndex}`"
      style="width: 100%; height: 100%"
      class="my_echarts"
    ></div>
    <div class="bg"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    nums: {
      type: Number,
      default: 0,
    },
    idIndex: {
      type: Number,
    },
  },
  watch: {
    nums: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          setTimeout(() => {
            this.setEchartsFun(newValue);
          }, 500);
        }
      },
    },
  },
  data() {
    return {
      myEcharts: null,
    };
  },
  methods: {
    setEchartsFun(num) {
      let data = num;
      this.myEcharts = echarts.init(
        document.getElementById(`Mychart${this.idIndex}`)
      );

      let option = {
        polar: {
          radius: ["50%", "60%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 100,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(80, 113, 144, .3)",
            },
            data: [data],
            coordinateSystem: "polar",

            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(176, 236, 138, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(34, 170, 190, 1)",
                  },
                ]),
              },
            },
          },
        ],
      };
      this.myEcharts.setOption(option);

      window.addEventListener("resize", () => {
        this.myEcharts?.resize();
      });
    },
  },
  mounted() {},
  destroyed() {
    this.myEcharts?.dispose();
    this.myEcharts = null;
  },
};
</script>


<style lang="scss" scoped>
@import "@/utils/px2vwvh.scss";

.e_page {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 4% 0;
}
.bg {
  @include px2vw(width, 82);
  @include px2vh(height, 82);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 69, 102, 0.3) 0%, rgba(11, 69, 102, 0.1) 100%);
}
</style>
